import React, { useState, useEffect } from "react";
import { Select, Form, Button } from "antd"; // 假设你正在使用Ant Design的Select组件
import { CommonModal } from "@/views/components/CommonModal";
import { CommonTable } from "@/pages/OrderModule/common/components/CommonTable";
import SubTitle from "@/pages/OrderModule/common/components/SubTitle";
import { SimpleTable } from "@/views/components/SearchTable/index";
import { SKU_SALES_STATUS, STORE_GOODS_ACTION_TYPE } from "@/views/utils/constant";

const SelectLog = ({ children, record, isSkuType, type }) => {
	const originClick = children.props.onClick;

	const cloneChildren = React.cloneElement(children, {
		onClick: () => {
			originClick && originClick();
			setVisible(true);
		}
	});
	const [visible, setVisible] = useState(false);
	const [detailList, setDetailList] = useState([]);
	const detailColumns = [
		{
			name: "商品名称",
			hidden:
				record.type == "update-stock" ||
				(!isSkuType && (record.type == "on-shelf" || record.type == "off-shelf")) ||
				record.type == "update-sku-code" ||
				record.type == "sync-stock-by-hand",
			code: "spuName"
		},
		{
			name: "颜色及规格",
			hidden: record.type == "update-spu-code" || record.type == "on-sync-stock" || record.type == "off-sync-stock" || isSkuType,
			code: "color"
		},
		{
			name: "商品编码",
			hidden: record.type == "update-sku-code" || record.type == "update-spu-code" || isSkuType,
			code: "skuCode"
		},

		{
			name: "款式编码",
			hidden: !isSkuType || record.type == "update-spu-code",
			code: "spuCode"
		},
		{
			name: "款式编码",
			hidden: record.type !== "on-sync-stock",
			code: "spuCode"
		},
		{
			name: "款式编码",
			hidden: record.type !== "off-sync-stock",
			code: "spuCode"
		},
		{
			name: "库存类型",
			hidden:
				record.type == "update-stock" ||
				record.type == "on-shelf" ||
				record.type == "off-shelf" ||
				record.type == "update-sku-code" ||
				record.type == "update-spu-code" ||
				record.type == "update-spu-code" ||
				record.type == "on-sync-stock" ||
				record.type == "off-sync-stock",
			code: "stockType"
		},
		{
			name: "变更前",
			hidden:
				record.type == "on-shelf" ||
				record.type == "off-shelf" ||
				record.type == "sync-stock-by-hand" ||
				record.type == "on-sync-stock" ||
				record.type == "off-sync-stock",
			code: "updateBefore",
            render: (text) => {
                return text != 'null' ? text: ''
            }
		},
		{
			name: "变更后",
			hidden:
				record.type == "on-shelf" ||
				record.type == "off-shelf" ||
				record.type == "sync-stock-by-hand" ||
				record.type == "on-sync-stock" ||
				record.type == "off-sync-stock",
			code: "updateAffter"
		},
		{
			name: "同步数量",
			hidden:
				record.type == "update-stock" ||
				record.type == "on-shelf" ||
				record.type == "off-shelf" ||
				record.type == "update-sku-code" ||
				record.type == "update-spu-code" ||
				record.type == "on-sync-stock" ||
				record.type == "off-sync-stock",
			code: "syncStockNum"
		},
		{
			name: "关闭前状态",
			hidden: record.type !== "off-sync-stock",
			code: "statusBeforeClosing"
		},
		{
			name: "开启前状态",
			hidden: record.type !== "on-sync-stock",
			code: "statusBeforeOpening" || record.type == "off-sync-stock"
		},
		{
			name: "开启后库存类型",
			hidden: record.type !== "on-sync-stock",
			code: "inventoryTypeAfterOpening" || record.type == "off-sync-stock"
		}
	];
	useEffect(() => {
		console.log(record, "record");
		if (record.operRemark) {
			let arr = [];
			try {
				const o = JSON.parse(record.operRemark || "[]");
				if (!Array.isArray(o)) arr = [o];
			} catch (error) {
				console.warn(record.operRemark, "解析错误");
				console.error(error);
			}
			setDetailList(
				arr.map(info => ({
					color: info.skuSpec,
					skuCode: info.skuCode,
					stockType: info.stockType,
					syncStockNum: info.syncStockNum,
					statusBeforeClosing: info.statusBeforeClosing,
					updateBefore: info.beforeValue,
					updateAffter: info.afterValue,
					spuName: info.spuName ? info.spuName : info.skuName,
					spuCode: info.spuCode,
					statusBeforeOpening: info.statusBeforeOpening,
					inventoryTypeAfterOpening: info.inventoryTypeAfterOpening
				}))
			);
		} else {
			setDetailList([]);
		}
	}, [visible]);
	const [form] = Form.useForm();
	const tableKey = "id";
	const searchSimpleTableProps = {
		tableKey,
		rowKey: "DetailButton2131",
		dataSource: detailList,
		columns: detailColumns,
		footer: false
	};
	const onDetailCancel = () => {
		setVisible(false);
	};
	return (
		<>
			{cloneChildren}
			<CommonModal
				title={{ title: "查看明细" }}
				width="1154px"
				visible={visible}
				className="views-table-dialog"
				onOk={onDetailCancel}
				onCancel={onDetailCancel}
				minHeight="100px"
				footer={[<div></div>]}
			>
				<SubTitle
					symbol
					as="s2"
					title={STORE_GOODS_ACTION_TYPE.map(x => {
						if (x.value == record.type) {
							return x.label;
						}
					})}
					wrapStyle={{ marginBottom: 16 }}
				/>
				<div className="views-container">
					<SimpleTable key={tableKey} {...searchSimpleTableProps} />
				</div>
			</CommonModal>
		</>
	);
};

export default SelectLog;
